<script setup lang="ts">
import { addRodAPI, deleteRodAPI, getAreaListAPI, getRodListAPI } from '@/apis/rod'
import type { AddRodParams, AreaListItem, RodListItemRes, RodListParams } from '@/types/rod'
import { ElMessage, ElMessageBox, type FormInstance } from 'element-plus'
import { ref } from 'vue'


const searchForm = ref<RodListParams>({
  page: 1,
  pageSize: 10,
  poleName: '',
  poleNumber: '',
  poleStatus: ''
})

// 1. 获取一体杆列表
const RodList = ref<RodListItemRes[]>()
const total = ref(0)
const getRodList = async () => {
  const res = await getRodListAPI(searchForm.value)
  RodList.value = res.data.rows
  total.value = res.data.total
}
getRodList()


// 2. 搜索
const handleSearch = () => {
  searchForm.value.page = 1
  getRodList()
}

// 3. 分页跳转
const onChange = () => {
  // 本来想选择每页显示数量时回到第一页
  getRodList()
}

// 4. 添加一体杆模态框相关逻辑
const dialogVisible = ref(false)
const formRef = ref<FormInstance>()
const form = ref<AddRodParams>({
  areaId: 1,
  poleIp: '',
  poleName: '',
  poleNumber: '',
  poleType: 'entrance',
})

// 表单校验规则
const rules = {
  poleName: [{ required: true, message: '请输入一体杆名称', trigger: 'blur' }],
  poleNumber: [{ required: true, message: '请输入一体杆编号', trigger: 'blur' }],
  poleIp: [{ required: true, message: '请输入一体杆IP', trigger: 'blur' }],
  areaId: [{ required: true, message: '请选择关联区域', trigger: 'change' }],
  poleType: [{ required: true, message: '请选择一体杆类型', trigger: 'change' }]
}

// 打开添加模态框
const handleAdd = () => {
  dialogVisible.value = true
  getAreaList()
}

// 获取关联区域下拉列表
const areaList = ref<AreaListItem[]>([])
const getAreaList = async () => {
  const res = await getAreaListAPI()
  areaList.value = res.data
}
getAreaList()

// 提交表单
const handleSubmit = async () => {
  try {
    await formRef.value?.validate()
    const res = await addRodAPI(form.value)
    console.log(res);

    dialogVisible.value = false
    getRodList()
    ElMessage.success('添加成功')
  } catch (error) {
    console.log(error);

  }
}

// 5. 实现编辑逻辑
const handleEdit = (row: RodListItemRes) => {
  console.log(row)
  console.log(row)
}

// 6. 实现删除逻辑
const handleDelete = async (row: RodListItemRes) => {

  ElMessageBox.confirm('确定删除该一体杆吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    await deleteRodAPI(row.id)
    ElMessage.success('删除成功')
    getRodList()
  })
}

// 7. 实现批量删除逻辑
const ids = ref('')
const handleSelect = (selection: RodListItemRes[]) => {
  // 从每行的数据获取选中的id,将id拼接成字符串
  ids.value = selection.map(item => item.id).join(',')
}
const handleBatchDelete = () => {
  ElMessageBox.confirm('确定删除这些一体杆吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    await deleteRodAPI(ids.value)
    ElMessage.success('删除成功')
    getRodList()
  })
}
</script>

<template>
  <div class="rod-manage-page">
    <!-- 搜索表单 -->
    <el-form :model="searchForm" inline class="search-form">
      <el-form-item label="一体杆名称" style="width:240px ;">
        <el-input v-model="searchForm.poleName" placeholder="请输入一体杆名称" />
      </el-form-item>
      <el-form-item label="一体杆编号" style="width:240px ;">
        <el-input v-model="searchForm.poleNumber" placeholder="请输入一体杆编号" />
      </el-form-item>
      <el-form-item label="运行状态" style="width: 220px">
        <el-select v-model="searchForm.poleStatus" placeholder="请选择运行状态">
          <el-option label="正常" value="0" />
          <el-option label="异常" value="1" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSearch">查询</el-button>
      </el-form-item>
    </el-form>

    <!-- 操作按钮 -->
    <div class="operation-btns">
      <el-button type="primary" @click="handleAdd">添加一体杆</el-button>
      <el-button @click="handleBatchDelete">批量删除</el-button>
    </div>

    <!-- 表格 -->
    <el-table :data="RodList" border style="width: 100%" class="rod-table" @select="handleSelect">
      <el-table-column type="selection" width="55" />
      <el-table-column label="序号" type="index" width="80" />
      <el-table-column prop="poleName" label="一体杆名称" />
      <el-table-column prop="poleNumber" label="一体杆编号" />
      <el-table-column prop="poleIp" label="一体杆IP" />
      <el-table-column prop="areaName" label="安装区域" />
      <el-table-column prop="poleType" label="一体杆类型">
        <template #default="{ row }">
          {{ row.poleType === 'entrance' ? '入口' : row.poleType === 'export' ? '出口' : '中心' }}
        </template>
      </el-table-column>
      <el-table-column prop="poleStatus" label="运行状态">
        <template #default="{ row }">
          <!-- 运行状态 0:正常,1:异常 -->
          <el-tag :type="row.poleStatus === 0 ? 'success' : 'danger'">
            {{ row.poleStatus === 0 ? '正常' : '异常' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180">
        <template #default="{ row }">
          <el-button type="primary" link @click="handleEdit(row)">编辑</el-button>
          <el-button type="danger" link @click="handleDelete(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination v-model:current-page="searchForm.page" v-model:page-size="searchForm.pageSize"
      :page-sizes="[10, 20, 30, 40]" :background="true" layout="total, sizes, prev, pager, next, jumper" :total="total"
      @change="onChange" style="margin-top: 30px;" />

    <!-- 添加一体杆模态框 -->
    <el-dialog v-model="dialogVisible" title="添加一体杆" width="500px" :close-on-click-modal="false"
      :close-on-press-escape="false">
      <el-form ref="formRef" :model="form" :rules="rules" label-width="100px" style="padding: 20px 40px">
        <el-form-item label="一体杆名称" prop="poleName">
          <el-input v-model="form.poleName" placeholder="请输入一体杆名称" />
        </el-form-item>
        <el-form-item label="一体杆编号" prop="poleNumber">
          <el-input v-model="form.poleNumber" placeholder="请输入一体杆编号" />
        </el-form-item>
        <el-form-item label="一体杆IP" prop="poleIp">
          <el-input v-model="form.poleIp" placeholder="请输入一体杆IP" />
        </el-form-item>
        <el-form-item label="关联区域" prop="areaId">
          <el-select v-model="form.areaId" placeholder="请选择关联区域" style="width: 100%">
            <el-option v-for="item in areaList" :key="item.areaId" :label="item.areaName" :value="item.areaId" />
          </el-select>
        </el-form-item>
        <el-form-item label="一体杆类型" prop="poleType">
          <el-select v-model="form.poleType" placeholder="请选择一体杆类型" style="width: 100%">
            <el-option label="入口" value="entrance" />
            <el-option label="出口" value="export" />
            <el-option label="中心" value="center" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleSubmit">确认</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>
.rod-manage-page {
  padding: 20px;

  .search-form {
    margin-bottom: 20px;
  }

  .operation-btns {
    margin-bottom: 20px;
  }

  .rod-table {
    margin-top: 20px;
  }
}
</style>
